"use strict";

const train_css = [ ];

train_css["basis"] = [ 
["使用______标签引入外部样式文件", "link"],
["link 标签放在______标签内部", "head"],
["样式文件要以______为扩展名", ".css"],
["用______定义当前文档与被链接文档之间的关系", "rel"],
["link标签内链接外部样式文件使用______", "href"],
["link标签内文档类型是______", "type"],
["使用______标签可以在文档内部定义样式规则", "style"],
["可以为某个标签单独设置样式是______", "内联样式"],
["使用______可以在原样式规则中导入其他样式表", "@import"],
["空白只是看不见但同样占用______", "空间"],
["______是对定义样式规则的说明，便于后期维护理解", "注释"],
["样式规则如果存在错误，解析器会选择______", "忽略"],
];

train_css["selector"] = [
["选择所有class=\"intro\"的元素", ".intro"],
["选择所有id=\"firstname\"的元素", "#firstname"],
["选择所有元素", "*"],
["选择所有p元素", "p"],
["选择所有div元素和p元素", "div,p"],
["选择div元素内的所有p元素", "div p"],
["选择所有父级是 div 元素的 p 元素", "div>p"],
["选择所有紧接着div元素之后的p元素", "div+p"],
["选择所有带有target属性元素", "[target]"],
["选择所有使用target=\"_blank\"的元素", "[target=_blank]"],
["选择标题属性包含单词\"flower\"的所有元素", "[title~=flower]"],
["选择 lang 属性以 en 为开头的所有元素", "[lang|=en]"],
["选择所有未访问链接", ":link"],
["选择所有访问过的链接", ":visited"],
["选择活动链接", ":active"],
["选择鼠标在链接上面时", ":hover"],
["选择具有焦点的输入元素", "input:focus"],
["选择每一个p元素的第一个字母", "p:first-letter"],
["选择每一个p元素的第一行", "p:first-line"],
["指定只有当p元素是其父级的第一个子级的样式。", "p:first-child"],
["在每个p元素之前插入内容", "p:before"],
["在每个p元素之后插入内容", "p:after"],
["选择一个lang属性的起始值=\"it\"的所有p元素", "p:lang(it)"],
["选择p元素之后的每一个ul元素", "p~ul"],
["选择每一个src属性的值以\"https\"开头的元素", "[src^=\"https\"]"],
["选择每一个src属性的值以\".pdf\"结尾的元素 ", "[src$=\".pdf\"]"],
["选择每一个src属性的值包含子字符串\"runoob\"的元素", "[src*=\"runoob\"]"],
["选择每个p元素是其父级的第一个p元素", "p:first-of-type"],
["选择每个p元素是其父级的最后一个p元素", "p:last-of-type"],
["选择每个p元素是其父级的唯一p元素", "p:only-of-type"],
["选择每个p元素是其父级的唯一子元素", "p:only-child"],
["选择每个p元素是其父级的第二个子元素", "p:nth-child(2)"],
["选择每个p元素的是其父级的第二个子元素，从最后一个子项计数", "p:nth-last-child(2)"],
["选择每个p元素是其父级的第二个p元素", "p:nth-of-type(2)"],
["选择每个p元素的是其父级的第二个p元素，从最后一个子项计数", "p:nth-last-of-type(2)"],
["选择每个p元素是其父级的最后一个子级。", "p:last-child"],
["选择文档的根元素", ":root"],
["选择每个没有任何子级的p元素（包括文本节点）", "p:empty"],
["选择当前活动的#news元素（包含该锚名称的点击的URL）", "#news:target"],
["选择每一个已启用的输入元素", "input:enabled"],
["选择每一个禁用的输入元素", "input:disabled"],
["选择每个选中的输入元素", "input:checked"],
["选择每个并非p元素的元素", ":not(p)"],
["匹配元素中被用户选中或处于高亮状态的部分", "::selection"],
["匹配值在指定区间之外的input元素", ":out-of-range"],
["匹配值在指定区间之内的input元素", ":in-range"],
["用于匹配可读及可写的元素", ":read-write"],
["用于匹配设置 \"readonly\"（只读） 属性的元素", ":read-only"],
["用于匹配可选的输入元素", ":optional"],
["用于匹配设置了 \"required\" 属性的元素", ":required"],
["用于匹配输入值为合法的元素", ":valid"],
["用于匹配输入值为非法的元素", ":invalid"],
];

train_css["weight"] = [
["可以使用 ______ 强制提升某个规则的权限", "!important"],
["ID权重", "0100"],
["class，类属性值权重", "0010"],
["标签,伪元素权重", "0001"],
["*权重", "0000"],
["行内样式权重", "1000"],
["两条规则权限一样，默认应用第几个规则", "二"],
["继承的规则有没有权重", "没有"],
["元素会被多个样式一层层作用，这就是______的来源", "css"],
];

train_css["text"] = [
["字体系列", "font-family"],
["字体 .otf 格式是______", "opentype"],
["字体 .woff 格式是______", "woff"],
["字体 .ttf 格式是______", "truetype"],
["字体 .eot 格式是______", "Embedded-opentype"],
["不建议使用 ______ 字体，因为文件太大且大部分是商业字体。", "中文"],
["字重定义:正常的;", "font-weight:normal;"],
["字重定义:粗体;", "font-weight:bold;"],
["字重定义:较粗体;", "font-weight:bolder;"],
["字重定义:轻的;", "font-weight:lighter;"],
["字重定义:100～900;", "font-weight:100~900;"],
["百分数是子元素相对于父元素的______", "大小"],
["______单位等同于百分数单位", "em"],
["red | green 是______颜色声明", "字符"],
["#dddddd 是______网页颜色声明", "16进制"],
["rgb(38, 149, 162) 是______颜色声明", "rgb"],
["表示透明到不透明", "0~1"],
["行高", "line-height"],
["字体样式:正常;", "font-style:normal;"],
["字体样式:斜体的字体;", "font-style:italic;"],
["字体样式:倾斜的字体;", "font-style:oblique;"],
["声明中设置所有字体属性", "font"],
["字体-变形:小号大写字母;", "font-variant:small-caps;"],
["文本-转换:首字母大写;", "text-transform:capitalize;"],
["文本-转换:全部大写;", "text-transform:uppercase;"],
["文本-转换:全部小写;", "text-transform:lowercase;"],
["文本-装饰:无;", "text-decoration:none;"],
["文本-装饰:下划线;", "text-decoration:underline;"],
["文本-装饰:上划线;", "text-decoration:overline;"],
["文本-装饰:删除线;", "text-decoration:line-through;"],
["文本-装饰:闪烁;", "text-decoration:blink;"],
["文本阴影:颜色 水平偏移 垂直偏移 模糊度", "text-shadow"],
["空白:保留文本中的所有空白;", "white-space:pre;"],
["空白:禁止文本换行;", "white-space:nowrap;"],
["空白:保留空白，保留换行符;", "white-space:pre-wrap;"],
["空白:空白合并，保留换行符;", "white-space:pre-line;"],
["溢出-换行:打破-单词;", "overflow-wrap:break-word;"],
["溢出:隐藏;", "overflow:hidden;"],
["文本缩进", "text-indent"],
["水平对齐:左;", "text-align:left;"],
["水平对齐:右;", "text-align:right;"],
["水平对齐:中;", "text-align:center;"],
["垂直对齐:中间;", "vertical-align:middle;"],
["垂直对齐:基线;", "vertical-align:baseline;"],
["垂直对齐:下标;;", "vertical-align:sub;"],
["垂直对齐:上标;", "vertical-align:super;"],
["垂直对齐:底部;", "vertical-align:bottom;"],
["垂直对齐:顶部;", "vertical-align:top;"],
["单词间距", "word-spacing"],
["字母间距", "letter-spacing"],
["书写方式：垂直rl;", "writing-mode:vertical-rl;"],
["书写方式：垂直lr;", "writing-mode:vertical-lr;"],
];

train_css["box"] = [ 
["上边距", "margin-top"],
["下边距", "margin-bottom"],
["左边距", "margin-left"],
["右边距", "margin-right"],
["上边框", "border-top"],
["下边框", "border-bottom"],
["左边框", "border-left"],
["右边框", "border-right"],
["上填充", "padding-top"],
["下填充", "padding-bottom"],
["左填充", "padding-left"],
["右填充", "padding-right"],
["居中-margin设置", "auto"],
["盒子______属性可以设定负值", "margin"],
["相邻元素的纵向外边距会进行合并,取______值", "最大值"],
["宽度与高度包括内边距与边框", "box-sizing:border-box;"],
["边框样式-定义无边框", "none"],
["边框样式-定义点状边框", "dotted"],
["边框样式-定义虚线", "dashed"],
["边框样式-定义实线", "solid"],
["边框样式-定义双线", "double"],
["边框样式-定义 3D 凹槽边框", "groove"],
["边框样式-定义 3D 垄状边框", "ridge"],
["边框样式-定义 3D inset 边框", "inset"],
["边框样式-定义 3D outset 边框", "outset"],
["上边框样式", "border-top-style"],
["下边框样式", "border-bottom-style"],
["左边框样式", "border-left-style"],
["右边框样式", "border-right-style"],
["边框样式", "border-style"],
["上边框宽度", "border-top-width"],
["下边框宽度", "border-bottom-width"],
["左边框宽度", "border-left-width"],
["右边框宽度", "border-right-width"],
["边框宽度", "border-width"],
["上边框颜色", "border-top-color"],
["下边框颜色", "border-bottom-color"],
["左边框颜色", "border-left-color"],
["右边框颜色", "border-right-color"],
["边框颜色", "border-color"],
["圆角边框", "border-radius"],
["上左圆角边框", "border-top-left-radius"],
["上右圆角边框", "border-top-right-radius"],
["下左圆角边框", "border-bottom-left-radius"],
["下右圆角边框", "border-bottom-right-radius"],
["轮廓线样式", "outline-style"],
["轮廓线线宽设置", "outline-width"],
["轮廓线线条颜色", "outline-color"],
["轮廓线", "outline"],
["显示:隐藏元素;", "display:none;"],
["显示:显示为块元素;", "display:block;"],
["显示:显示为行元素;", "display:inline;"],
["显示:行级块元素;", "display:inline-block;"],
["可见度:可见;", "visibility:visible;"],
["可见度:不可见;", "visibility:hidden;"],
["溢出:隐藏;", "overflow:hidden;"],
["溢出:滚动条;", "overflow:scroll;"],
["溢出:自动;", "overflow:auto;"],
["文本溢出:修剪;", "text-overflow:clip;"],
["文本溢出:省略号;", "text-overflow:ellipsis;"],
["文本溢出:字符;", "text-overflow:string;"],
["宽度", "width"],
["高度", "height"],
["最小宽度", "min-width"],
["最小高度", "min-height"],
["最大宽度", "max-width"],
["最大高度", "max-height"],
["撑满可用的空间", "fill-available"],
["根据内容适应尺寸", "fit-content"],
["容器尺寸按最小元素宽度设置", "min-content"],
["容器尺寸按子元素最大宽度设置", "max-content"],
["不透明度", "opacity"]
];

train_css["background"] = [
["背景颜色", "background-color"],
["背景图片", "background-image"],
["背景裁切:边框-盒子;", "background-clip:border-box;"],
["背景裁切:内边距-盒子;", "background-clip:padding-box;"],
["背景裁切:内容-盒子;", "background-clip:content-box;"],
["背景重复:重复;", "background-repeat:repeat;"],
["背景重复:水平重复;", "background-repeat:repeat-x;"],
["背景重复:垂直重复;", "background-repeat:repeat-y;"],
["背景重复:不重复;", "background-repeat:no-repeat;"],
["背景重复:均匀分布;", "background-repeat:space;"],
["背景-附件:固定;", "background-attachment:fixed;"],
["背景-附件:滚动;", "background-attachment:scroll;"],
["背景位置:左对齐;", "background-position:left;"],
["背景位置:右对齐;", "background-position:right;"],
["背景位置:居中对齐;", "background-position:center;"],
["背景位置:顶端对齐;", "background-position:top;"],
["背景位置:底部对齐;", "background-position:bottom;"],
["背景尺寸:覆盖;", "background-size:cover;"],
["背景尺寸:容器;", "background-size:contain;"],
["可以使用一条指令设置背景", "background"],
["盒子阴影", "box-shadow"],
["线性渐变", "linear-gradient"],
["渐变角度", "deg"],
["向右渐变", "to right"],
["向左渐变", "to left"],
["左上渐变", "to top left"],
["径向渐变", "radial-gradient"],
["左下径向渐变", "at bottom left"],
["右下径向渐变", "at bottom right"],
["左侧向中心径向渐变", "at center left"],
["底部向中心径向渐变", "at 50% 100%"],
["标识位相同时将没有______效果", "过渡"],
["颜色未指定标识时，颜色会______分布。", "平均"],
["渐变重复", "repeating-linear-gradient"],
["径向重复", "repeating-radial-gradient"],
];

train_css["table"] = [
["对应 table 样式规则", "table"],
["对应 caption 样式规则", "table-caption"],
["对表 tr 样式规则", "table-row"],
["对应 tbody 样式规则", "table-row-group"],
["对应 thead 样式规则", "table-header-group"],
["对应 tfoot 样式规则", "table-footer-group"],
["对应 td 样式规则", "table-cell"],
["______ 可以设置标题位置top | bootom", "caption-side"],
["文本对齐:左边;", "text-align:left;"],
["文本对齐:右边;", "text-align:right;"],
["文本对齐:中间;", "text-align:center;"],
["文本对齐:两端对齐;", "text-align:justify;"],
["文本对齐:继承;", "text-align:inherit;"],
["垂直对齐:顶部;", "vertical-align:top;"],
["垂直对齐:居中;", "vertical-align:middle;"],
["垂直对齐:底部;", "vertical-align:bottom;"],
["边框间距", "border-spacing"],
["边框合并", "border-collapse"],
["隐藏单元格", "empty-cells:hide;"],
["列表符号", "list-style-type"],
["无标记", "none"],
["默认。标记是实心圆。", "disc"],
["标记是空心圆", "circle"],
["标记是实心方块。", "square"],
["标记是数字。", "decimal"],
["0开头的数字标记。(01, 02, 03, 等。)", "decimal-leading-zero"],
["小写罗马数字(i, ii, iii, iv, v, 等。)", "lower-roman"],
["大写罗马数字(I, II, III, IV, V, 等。)", "upper-roman"],
["小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)", "lower-alpha"],
["大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)", "upper-alpha"],
["小写希腊字母(alpha, beta, gamma, 等。)", "lower-greek"],
["小写拉丁字母(a, b, c, d, e, 等。)", "lower-latin"],
["大写拉丁字母(A, B, C, D, E, 等。)", "upper-latin"],
["传统的希伯来编号方式", "hebrew"],
["传统的亚美尼亚编号方式", "armenian"],
["传统的乔治亚编号方式(an, ban, gan, 等。)", "georgian"],
["简单的表意数字", "cjk-ideographic"],
["标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）", "hiragana"],
["标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）", "katakana"],
["标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）", "hiragana-iroha"],
["标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）", "katakana-iroha"],
["列表样式图片", "list-style-image"],
["列表样式位置:内部", "list-style-position:inside;"],
["列表样式位置:外部", "list-style-position:outside;"],
["列表样式", "list-style"],
["背景大小", "background-size"],
["使用______伪类  向前添加内容", "::before"],
["使用 ______ 向后面添加内容", "::after"],
];

train_css["float"] = [
["______ 属性定义元素在哪个方向浮动", "float"],
["______元素会生成一个块级框，而不论它本身是何种元素。", "浮动"],
["浮动:左;", "float:left;"],
["浮动:右;", "float:right;"],
["浮动:无;", "float:none;"],
["两个元素都设置浮动后，会怎么显示", "并排"],
["浮动元素边界不能超过父元素的______", "padding"],
["元素浮动后会变为______元素", "块元素"],
["清除:左边;", "clear:left;"],
["清除:右边;", "clear:right;"],
["清除:二者都;", "clear:both;"],
["使用 ______ 伪类为父元素添加后标签，实现清除浮动影响。", "::after"],
["通过添加父元素并设置 ______ 属性可以清除浮动。", "overflow"],
["父元素产生 ______ 机制，即父元素的高度计算会包括浮动元素的高度。", "BFC"],
["外边距环绕", "shape-outside:margin-box;"],
["内边距环绕", "shape-outside:padding-box;"],
["边线环绕", "shape-outside:border-box;"],
["内容环绕", "shape-outside:content-box;"],
["剪辑路径:圆形;", "clip-path:circle;"],
["剪辑路径:椭圆;", "clip-path:ellipse;"],
["剪辑路径:多边形;", "clip-path:polygon;"],
["圆形环绕", "shape-outside:circle;"],
["椭圆环绕", "shape-outside:ellipse;"],
["图片环绕", "shape-outside:url;"],
["多边环绕", "shape-outside:polygon;"],
];

train_css["position"] = [
["位置:文档流;", "position:static;"],
["位置:相对定位;", "position:relative;"],
["位置:绝对定位;", "position:absolute;"],
["位置:固定定位;", "position:fixed;"],
["位置:粘性定位;", "position:sticky;"],
["距离顶边", "top"],
["距离下边", "bottom"],
["距离左部", "left"],
["距离右边", "right"],
["______定位是相对于元素原来的位置控制，当元素发生位置偏移时，原位置留白。", "相对"],
["______定位不受文档流影响，就像漂浮在页面中的精灵，绝对定位元素拥有行内块特性。", "绝对"],
["如果父级元素设置了 relative | fixed | sticky ，______ 定位子元素将参数此父元素进行定位。", "绝对"],
["如果没有为定位元素设置偏移，将受 ______ 元素的padding等属性影响。", "父"],
["可以通过定位的 ______ 值设置元素的尺寸。", "偏移"],
["通过将 left 设置为%多少 ,并向左偏移子元素宽度一半可以实现水平居中，垂直居中使用方式类似。", "50"],
["______ 定位我们可以很方便的控制元素在任何位置的摆放", "绝对"],
["______ 控制元素的上下层级，数值越大越在上面。", "z-index"],
["父级子元素设置 ______ 没有意义，子元素永远在父元素上面的", "z-index"],
["不属于同一个父元素设置 ______ 定位时，后面的元素挤掉原来位置的元素", "粘性"],
];

train_css["flex"] = [
["声明块级弹性盒子;", "display:flex;"],
["声明内联级弹性盒子;", "display:inline-flex;"],
["弹性盒子-方向:行;", "flex-direction:row;"],
["弹性盒子-方向:行-反转;", "flex-direction:row-reverse;"],
["弹性盒子-方向:列;", "flex-direction:column;"],
["弹性盒子-方向:列-反转;", "flex-direction:column-reverse;"],
["弹性盒子-包:不包;", "flex-wrap:nowrap;"],
["弹性盒子-包:包;", "flex-wrap:wrap;"],
["弹性盒子-包:包-反转;", "flex-wrap:wrap-reverse;"],
["flex-direction 与 flex-wrap 的组合简写模式", "flex-flow"],
["调整-内容:弹性盒子-开始;", "justify-content:flex-start;"],
["调整-内容:弹性盒子-结尾;", "justify-content:flex-end;"],
["调整-内容:中心;", "justify-content:center;"],
["调整-内容:空白-之间;", "justify-content:space-between;"],
["调整-内容:空白-环绕;", "justify-content:space-around;"],
["调整-内容:空白-均匀;", "justify-content:space-evenly;"],
["对齐-项目:伸展;", "align-items:stretch;"],
["对齐-项目:中心;", "align-items:center;"],
["对齐-项目:弹性盒子-开始;", "align-items:flex-start;"],
["对齐-项目:弹性盒子-结尾;", "align-items:flex-end;"],
["对齐-内容:伸展;", "align-content:stretch;"],
["对齐-内容:弹性盒子-开始;", "align-content:flex-start;"],
["对齐-内容:弹性盒子-结尾;", "align-content:flex-end;"],
["对齐-内容:中心;", "align-content:center;"],
["对齐-内容:空白-之间;", "align-content:space-between;"],
["对齐-内容:空白-环绕;", "align-content:space-around;"],
["对齐-内容:空白-均匀;", "align-content:space-evenly;"],
["对齐-自己:伸展;", "align-self:stretch;"],
["对齐-自己:弹性盒子-开始;", "align-self:flex-start;"],
["对齐-自己:弹性盒子-结尾;", "align-self:flex-end;"],
["对齐-自己:中心;", "align-self:center;"],
["将弹性盒子的可用空间，分配给弹性元素", "flex-grow"],
["在弹性盒子装不下元素时定义的缩小值", "flex-shrink"],
["在分配多余空间之前，项目占据的主轴空间", "flex-basis"],
["flex-grow、flex-shrink 、flex-basis缩写组合", "flex"],
["用于控制弹性元素的位置", "order"]
];
train_css["grid"] = [
["CSS ______ 布局(Grid Layout) 是CSS中最强大的布局系统", "网格"],
["声明块级网格", "display:grid;"],
["声明行级网格", "display:inline-grid;"],
["使用 ______ 规则可划分列数", "grid-template-columns"],
["使用 ______ 划分行数", "grid-template-rows"],
["当容器宽度过大时将______", "漏白"],
["可以使用 ______ 自动适应容器。", "百分比"],
["使用 ______ 统一设置值，第一个参数为重复数量，第二个参数是重复值", "repeat"],
["可以设置多个 ______ 来定义重复", "值"],
["______ 是根据容器尺寸，自动设置元素尺寸", "自动填充"],
["使用 ______ 单位设置元素在空间中所占的比例", "fr"],
["______ 是 grid-template-rows、grid-template-columns、grid-template-areas 的三个属性的简写", "grid-template"],
["使用 ______ 方法可以设置取值范围", "minmax"],
["使用 ______ 设置行间距。", "row-gap"],
["使用 ______ 定义列间距。", "column-gap"],
["使用 ______ 规则可以一次定义行、列间距，如果间距一样可以只设置一个值。", "gap"],
["可以为每个 ______ 独立命名来进行调用。", "栅格"],
["对于 ______ 设置的栅格系统会自动命名，使用时使用 c 1、c 2 的方式定位栅格。", "重复"],
["行开始栅格线", "grid-row-start"],
["行结束栅格线", "grid-row-end"],
["列开始栅格线", "grid-column-start"],
["列结束栅格线", "grid-column-end"],
["通过设置具体的第几条栅格线来设置 ______ 位置", "区域"],
["使用 ______ 可以设置移动单元格数量，数值只能为正数。", "span"],
["______ 更加简洁是同时对 grid-row 与 grid-column 属性的组合声明。", "grid-area"],
["bootstrap栅格系统的开发，根据指定的样式自动设置 ______ 大小。", "栅格"],
["______ 由grid-row-start、grid-column-start、grid-row-end、grid-column-end 的简写模式。", "grid-area"],
["区域是由多个单元格构成，使用 ______可以定义栅格区域，并且栅格区域必须是矩形的。", "grid-template-areas"],
["系统会为区域 怎么 命名", "自动"],
["使用一个或多个 ______ 定义区域占位。", "."],
["改变单元流动方式-按列排序", "grid-auto-flow:column;"],
["改变单元流动方式-按行排序", "grid-auto-flow:row;"],
["使用 ______可以执行填充空白区域操作。", "grid-auto-flow:row dense;"],
["栅格内所有元素的垂直排列方式", "align-items"],
["栅格内所有元素的横向排列方式", "justify-items"],
["所有栅格在容器中的水平对齐方式，容器有额外空间时", "justify-content"],
["所有栅格在容器中的垂直对齐方式，容器有额外空间时", "align-content"],
["元素在栅格中垂直对齐方式", "align-self"],
["元素在栅格中水平对齐方式", "justify-self"],
["______: align-content justify-content", "place-content"],
["______: align-items justify-items", "place-items"],
["______: align-self justify-self", "place-self"],
["浏览器自动创建的多余网格的列宽", "grid-auto-columns"],
["浏览器自动创建的多余网格的行宽", "grid-auto-rows"],
];
train_css["transform"] = [
["______轴是水平轴", "X"],
["______轴是垂直轴", "Y"],
["______轴是纵深轴", "Z"],
["使用______规则控制元素的变形操作", "transform"],
["定义不进行转换。", "none"],
["定义 2D 转换。", "translate(x,y)"],
["定义 3D 转换。", "translate3d(x,y,z)"],
["定义转换，只是用 X 轴的值。", "translateX(x)"],
["定义转换，只是用 Y 轴的值。", "translateY(y)"],
["定义 3D 转换，只是用 Z 轴的值。", "translateZ(z)"],
["定义 2D 缩放转换。", "scale(x,y)"],
["定义 3D 缩放转换。", "scale3d(x,y,z)"],
["通过设置 X 轴的值来定义缩放转换。", "scaleX(x)"],
["通过设置 Y 轴的值来定义缩放转换。", "scaleY(y)"],
["通过设置 Z 轴的值来定义 3D 缩放转换。", "scaleZ(z)"],
["定义 2D 旋转，在参数中规定角度。", "rotate(angle)"],
["定义 3D 旋转。", "rotate3d(x,y,z,angle)"],
["定义沿着 X 轴的 3D 旋转。", "rotateX(angle)"],
["定义沿着 Y 轴的 3D 旋转。", "rotateY(angle)"],
["定义沿着 Z 轴的 3D 旋转。", "rotateZ(angle)"],
["定义沿着 X 和 Y 轴的 2D 倾斜转换。", "skew(x-angle,y-angle)"],
["定义沿着 X 轴的 2D 倾斜转换。", "skewX(angle)"],
["定义沿着 Y 轴的 2D 倾斜转换。", "skewY(angle)"],
["为 3D 转换元素定义透视视图。", "perspective(n)"],
["重复设置变形操作时只在______形态上操作。", "原"],
["沿X轴移动时正值向______移动", "右"],
["沿Y轴移动时正值向______移动", "下"],
["可同时设置______个值，解析器会从左向右依次执行", "多"],
["元素宽度为100px设置translateX(50%)时将移动______px", "50"],
["控制Z轴移动，正数向______", "外"],
["用于同时控制X/Y/Z轴的移动，三个值必须输入如果某个轴不需要移动时设置为______", "零"],
["沿X轴缩放一半。", "transform:scaleX(.5);"],
["沿Y轴缩放一半。", "transform:scaleY(.5);"],
["沿Z轴缩放元素，需要有______透视才可以查看到效果。", "3D"],
["使用CSS可以控制元素按照不同______进行旋转。", "坐标轴"],
["按水平轴发生旋转，如果旋转______deg 将不可见。", "90"],
["按垂直轴旋转，如果旋转______deg 将不可见。", "90"],
["使用______设置元素的X/YZ操作的基点", "transform-origin"],
["旋转默认以元素______进行旋转", "中心"],
["元素移动______受变形基点所影响", "不"],
["______规则为舞台元素控制景深", "perspective"],
["______规则用于将父级整个做为透视元素，会造成里面的每个子元素的透视是不一样的。", "perspective"],
["______函数用于为元素设置单独透视，每个元素的透视效果是一样的。", "perspective"],
["使用______用于控制3d透视。", "transform-style"],
["2D平面舞台", "flat"],
["3D透视舞台", "preserve-3d"],
["______用于控制视线的落点，就像我们眼睛看物体时的聚焦点。", "perspective-origin"],
["使用______用于控制是否可以看到元素的背面。", "backface-visibility"],
["背面可见", "visible"],
["背面隐藏", "hidden"],
];
train_css["transition"] = [
["______用于设置哪些属性应用过渡效果。", "transition-property"],
["______用于控制过渡结束后执行的JS事件", "transitionend"],
["结束过渡样式", "propertyName"],
["过渡需要的时间", "elapsedTime"],
["过渡的伪元素", "pseudoElement"],
["true:用户触发，false:脚本触发", "isTrusted"],
["______用于设置过渡时间", "transition-duration"],
["四个属性并设置了两个时间值，1,3属性使用第______个值", "一"],
["______用于设置过渡效果的速度", "transition-timing-function"],
["规定以相同速度开始至结束的过渡效果", "linear"],
["开始慢，然后快，慢下来，结束时非常慢", "ease"],
["开始慢，结束快", "ease-in"],
["开始快，结束慢", "ease-out"],
["中间快，两边慢", "ease-in-out"],
["在 cubic-bezier 函数中定义自己的值", "cubic-bezier(n,n,n,n)"],
["设置n个时间点，第一时间点变化状态", "steps(n,start)"],
["设置n个时间点，第一时间点初始状态", "steps(n,end)"],
["等于steps(1,start)，可以理解为从下一步开始", "step-start"],
["等于steps(1,end)，可以理解为从当前步开始", "step-end"],
["用于设置延迟过渡的时间。", "transition-delay"],
["使用______ 指令将过渡规则统一设置", "transition"],
];
train_css["animation"] = [
["通过定义一段动画中的关键点、关键状态来创建______。", "动画"],
["Keyframes相比transition对动画过程和细节有更______的控制。", "强"],
["过渡动画是______个状态间的变化", "两"],
["______动画可以处理动画过程中不同时间的细节变化", "帧"],
["______ 表示起始点", "from"],
["______表示终点", "to"],
["可以使用______数如 20%动画运行到20%时间时", "百分"],
["帧动画需要定义在不同______执行的动作", "时间"],
["使用______ 规则可以在元素身上同时使用多个动画。", "animation-name"],
["使用______ 可以声明动画播放的时间，即把所有帧执行一遍所需要的时间。", "animation-duration"],
["一般来讲有______值的属性都可以设置动画如宽度、透明度等。", "中间"],
["使用______ 规则设置动画重复执行次数", "animation-iteration-count"],
["设置值为______ 表示无限循环执行。", "infinite"],
["使用______ 控制动画运行的方向。", "animation-direction"],
["从0%到100%运行动画", "normal"],
["从100%到0%运行动画", "reverse"],
["先从0%到100%，然后从100%到0%", "alternate"],
["先从100%到0%，然后从0%到100%", "alternate-reverse"],
["使用______ 规则定义动画等待多长时间后执行", "animation-delay"],
["规定以相同速度开始至结束的过渡效果", "linear"],
["开始慢，然后快，慢下来，结束时非常慢", "ease"],
["开始慢，结束快", "ease-in"],
["开始快，结束慢", "ease-out"],
["中间快，两边慢", "ease-in-out"],
["在 cubic-bezier 函数中定义自己的值", "cubic-bezier(n,n,n,n)"],
["设置n个时间点，第一时间点变化状态", "steps(n,start)"],
["设置n个时间点，第一时间点初始状态", "steps(n,end)"],
["等于steps(1,start)，可以理解为从下一步开始", "step-start"],
["等于steps(1,end)，可以理解为从当前步开始", "step-end"],
["______ 效果等于 steps(1,start)", "step-start"],
["______ 效果等同于 steps(1,end)", "step-end"],
["使用 ______ 可以控制动画的暂停与运行", "animation-play-state"],
["暂停", "paused"],
["运行", "running"],
["______ 用于定义动画播放结束后的处理模式，是回到原来状态还是停止在动画结束状态。", "animation-fill-mode"],
["需要等延迟结束，起始帧属性才应用", ""],
["动画效果在起始帧，不等延迟结束", ""],
["结束后停留动画的最后一帧", ""],
["动画效果在起始帧，不等延迟结束，并且在结束后停止在最后一帧", "both"],
["必须存在______ 属性，否则过渡时间为0没有动画效果", "animation-duration"],

];
train_css["media"] = [
["______ Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。", "Media"],
["所有媒体类型", "all"],
["用于电脑屏幕，平板电脑，智能手机等", "screen"],
["打印设备", "print"],
["应用于屏幕阅读器等发声设备", "speech"],
["在 link 标签中通过 ______ 属性可以设置样式使用的媒体设备。", "media"],
["使用______ 可以引入指定设备的样式规则。", "@import"],
["可以使用 @______ 做到更细的控制，即在一个样式表中为多个媒体设备定义样式。", "media"],
["可以用______分隔同时支持多个媒体设备。", "逗号"],
["需要满足多个条件时才使用样式，多个条件使用______ 连接。", "and"],
["多个或 条件查询使用______连接，不像其他程序中使用 or 语法。", "逗号"],
["______ 表示不应用样式，即所有条件都满足时不应用样式。", "not"],
["设备宽度", "width"],
["设备高度", "height"],
["最小宽度", "min-width"],
["最大宽度", "max-width"],
["最小高度", "min-height"],
["最大高度", "max-height"],

];
train_css["jq"] = [
["jQuery 是一个 _______ 库。", "JavaScript"],
["jQuery 极大地简化了 _______ 编程。", "JavaScript"],
["目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 _______ 框架，而且提供了大量的扩展。", "JS"],
["通过 jQuery，您可以选取（查询，query）_______ 元素，并对它们执行 操作（actions）。", "HTML"],
["所有元素", "$(\"*\")"],
['id="lastname" 的元素', '$("#lastname")'],
['class="intro" 的所有元素', '$(".intro")'],
['class 为 "intro" 或 "demo" 的所有元素', '$(".intro,.demo")'],
['所有 p 元素', '$("p")'],
['所有 h1、div 和 p 元素', '$("h1,div,p")'],
['第一个 p 元素', '$("p:first")'],
[' 	最后一个 &lt;p&gt; 元素', '$("p:last")'],
['所有偶数 &lt;tr&gt; 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。', '$("tr:even")'],
['所有奇数 &lt;tr&gt; 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。', '$("tr:odd")'],
];